<template>
    <div class="center">
        <div class="center-construct">
            <el-button type="primary" style="margin-right: 10px;"  @click="addAppVersionDialog">新增版本</el-button>
        </div>
        <div class="center-table">
            <el-table
          :data="appTableList"
          style="width: 100%"
          stripe
          :header-cell-style="tableHeaderColor"
        >
        <el-table-column align="center"  label="序号" type="index" width="55"></el-table-column>
        <el-table-column prop="versionmsg" label="版本状态"  align="center" width="120">
            <template slot-scope="scope">
                <p v-if="scope.row.versionstatus == 0"> 最新版本 </p>
                <p v-if="scope.row.versionstatus == 1"> 需要升级 </p>
                <p v-if="scope.row.versionstatus == 2"> 强制升级 </p>
            </template>
        </el-table-column>
        <el-table-column prop="versionmsg" label="app产品"  align="center" >
          <template slot-scope="scope">
                <p v-if="scope.row.platform == 'android_app_agent'"> app展业版 </p>
                <p v-if="scope.row.platform == 'android_app_merchant'"> app商户版 </p>
            </template>
        </el-table-column>
        <el-table-column prop="versionmsg" label="版本更新描述"  align="center" />
        <el-table-column prop="downloadurl" label="下载地址"  align="center" />
        <el-table-column prop="appversion" label="app版本号" width="120" align="center" />
        <el-table-column prop="versioncode" label="版本记录号" width="120" align="center" />
        <el-table-column fixed="right" align="center" label="操作" width="100" >
            <template slot-scope="scope">
                <el-button type="text" @click="upDataAppDialog(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
       <div class="pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          @size-change="sizechange"
          :page-size="listParsem.size"
          :current-page.sync="listParsem.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
     </div>
        </div>
        <el-dialog
         :title="form.id?'编辑app版本':'新增app版本'"
         :visible.sync="appTypeVisible"
         width="500px"
         >
         <el-form :model="form" :inline="true" :rules="formRules" ref="formRules" label-width="120px" >
            <el-form-item label="版本状态" prop="versionstatus">
              <el-select style="width:280px;" v-model="form.versionstatus" placeholder="请选择版本状态">
                <el-option label="需要升级"  :value="1"></el-option>
                <el-option label="强制升级"  :value="2"></el-option>
                <el-option label="最新版本"  :value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="app产品" prop="platform">
              <el-select  style="width:280px;" v-model="form.platform" placeholder="请选择app产品">
                <el-option label="app展业版"  value="android_app_agent"></el-option>
                <el-option label="app商户版"  value="android_app_merchant"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="app版本号" prop="appversion">
                <el-input  style="width:280px;" v-model="form.appversion" placeholder="请输入app版本号" clearable  />
            </el-form-item>
            <el-form-item label="版本更新描述" prop="versionmsg">
                <el-input  style="width:280px;" type="textarea" :rows="3" v-model="form.versionmsg" placeholder="请输入版本更新描述" clearable  />
            </el-form-item>
            <el-form-item label="下载地址">
                <el-input  style="width:280px;" v-model="form.downloadurl" placeholder="请输入下载地址" clearable  />
            </el-form-item>
            <el-form-item label="版本记录号" >
                <el-input  style="width:280px;" v-model="form.versioncode" placeholder="请输入版本记录号" clearable  />
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
           <el-button @click="appTypeVisible = false">取 消</el-button>
           <el-button type="primary"  @click="addAppVersionClick">确 定</el-button>
         </span>
       </el-dialog>

    </div>
</template>

<script> 
import { versionPage , versionSave , versionUpdate} from '@/api/api.js'
export default{
    data(){
        return{
            appTableList:[],
            listParsem:{page:1,size:10 },
            total:0,
            appTypeVisible:false,
            formRules:{
                versionstatus:[{ required: true, message: '请选择版本状态', trigger: 'change' }],
                platform:[{ required: true, message: '请选择app产品', trigger: 'change' }],
                appversion:[{ required: true, message: '请输入app版本号', trigger: 'change' }],
            },
            form:{}
        }
    },
    mounted(){
       this.initList()
    },
    methods:{
       async initList(){
           const res = await versionPage(this.listParsem)
           this.appTableList = res.data
           this.total = res.pageInfo.recordCount
        },
       async  addAppVersionClick(){
           const valid = await this.$refs.formRules.validate() 
           if(valid){
            if(this.form.id){
                const res = await versionUpdate(this.form)
                if(res.code == 200){
                  this.$message.success('编辑成功！')
                  this.appTypeVisible = false  
                  this.initList()
               }else{
                  this.$message.error(res.message)
               }
            }else{
                const res = await versionSave(this.form)
               if(res.code == 200){
                  this.$message.success('新增成功')
                  this.appTypeVisible = false  
                  this.initList()
               }else{
                  this.$message.error(res.message)
               }
            }
           }
        },
        upDataAppDialog(v){
            this.appTypeVisible = true  
            this.form = JSON.parse(JSON.stringify(v))
        },
        addAppVersionDialog(){
           this.appTypeVisible = true  
           this.form = {}
            this.$nextTick(()=>{
              this.$refs.formRules.clearValidate()
            })
        },
        handleCurrentChange(val) {
          this.listParsem.page = val;
          this.initList()
      },
      sizechange(val) {
          this.listParsem.size = val;
          this.initList()
      },
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
          if (rowIndex === 0) {
            return "background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;";
          }
       }
    }
    
}
</script>

<style scope>
.center{
    width: 100%;
    height: calc(100% - 30px);
    background-color: #fff;
    padding-top: 30px;
    overflow-y: auto;
}
.center-table{
    margin-top: 30px;
    padding: 0 20px;
}
.center-construct{
    width: 100%;
    display: flex;
    justify-content: end;
    margin-bottom: 30px;
}
</style>